<style>
#kinfolk-table {border:#cca solid 1px; background:#ddc;text-align:center}
#kinfolk-table td {background:#ffe}
#kinfolk-table caption {font-size:large;}
</style>
<script>
$(document).ready(function(){
	$(".cancelBtn").die('click');
	var callingArr = <?php echo $this->callingJSON?>;
	countSibling();
	$("#hidden_student_sn").attr('value',$("#student_sn").val());

$("#setForm").ajaxForm({
	dataType:  'json',
	success: showResponse
});

function showResponse(res) {
	if (!res.success) {
		var message = '';
		$.each(res.error,function(i,v){
			$.each(v,function(ii,vv){
				  $("#th-"+ii) .addClass('ui-state-error');
					$.each(vv,function(iii,vvv){
						message += $("#th-"+ii).html()+': '+ vvv+ "\n";
					});
			});
		});
		jAlert(message, '<?php echo $this->translate('checking errors')?>');
	}
	else{
			$(".ui-state-error").removeClass('ui-state-error ');
			// 判斷下一位
    		if ($("#next_student").attr('checked')){
    			var ss = $("#student_sn option:selected").next();
    			if (ss) {
    				$(ss).attr('selected','selected');
    			}
    		}
    		$.cookies.set('Student_Sn',$("#student_sn").val());
			getdata($("#student_sn").val());
		}
	$('#main_body').unblock();
}

$("#save-sibling").click(function(){
	$('#main_body').block({message:'<h1><?php echo $this->translate('Data setting ..')?></h1>',  border: '3px solid #f00'});
	$("#setForm").submit();
});

$("#append-sibling").click(function(){
	var options = '';
	$.each(callingArr,function(i,v){
		options +="<option value='"+i+"'>"+v+"</option>";
	});
	$("#kinfolk-table tbody").append("<tr><td><input type='text'name='new_name[]' size='10' />"+
			"<td><select name='new_calling[]'>"+options+"</select></td>"+
			"<td><input name='new_phone_office[]' type='text' size='10' /></td>"+
			"<td><input name='new_phone_mobile[]' type='text' size='10' /></td>"+
			"<td><input name='new_email[]' type='text' size='15' /></td>"+
			"<td><input name='new_website[]' type='text' size='15' /></td>"+
			"<td><input type='button' class='cancelBtn' value='<?php echo $this->translate('cancel')?>' /></td>"
			);
	countSibling();
});

$(".deleteBtn").click(function(){
	if (confirm('<?php echo $this->translate('Are you sure delete ?')?>')){
	var sn = $(this).attr('id').substr(4);
	theid = $(this);
	$.getJSON('<?php echo $this->route('delete')?>',{sn:sn},function(){
		$(theid).	parents('tr').remove();
		countSibling();
	});
	}
});

$(".cancelBtn").live('click',function(){
	var td = $(this).parents('tr').children();
	if ($(td[0]).children('input').attr('value')=='') {
		$(this).parents('tr').remove();
		countSibling();
	}
	else if (confirm('<?php echo $this->translate('Are you sure delete ?')?>')){
		$(this).parents('tr').remove();
		countSibling();
	}

});

function countSibling() {
	var len =$("#kinfolk-table tbody tr").length;
	if (len==0)
		$("#save-sibling").attr('disabled','disabled');
	else
		$("#save-sibling").attr('disabled','');
}

});
</script>
<div id="main_body" class="ui-widget ui-widget-content ui-corner-all" >
<form action="<?php echo $this->route('set')?>" method="post"  id="setForm">
<input type="hidden" name="student_sn" id="hidden_student_sn" />
<table id="kinfolk-table">
<caption><?php echo $this->translate('kinfolk list')?></caption>
<thead>
<tr><th colspan="6">
<input type="button"  id="save-sibling"  value="<?php echo $this->translate('save')?>" />
<input type="button"  id="append-sibling"  value="<?php echo $this->translate('append')?>" />
</th></tr>
<tr>
<th id="th-name"><?php echo $this->translate('name')?></th>
<th id="th-calling"><?php echo $this->translate('calling')?></th>
<th id="th-phone_office"><?php echo $this->translate('phone_office')?></th>
<th id="th-phone_mobile"><?php echo $this->translate('phone_mobile')?></th>
<th id="th-email"><?php echo $this->translate('email')?></th>
<th id="th-website"><?php echo $this->translate('website')?></th>
</tr></thead>
<tbody>
<?php foreach($this->data as $val):?>
<tr>
<td><input type="text"  id="name-<?php echo $val['sn']?>" name="name[<?php echo $val['sn']?>]" value="<?php echo $val['name']?>"  size="10"/></td>
<td>
<select  id="calling-<?php echo $val['sn']?>" name="calling[<?php echo $val['sn']?>]">
<?php foreach($this->callingArr as $id=>$name):?>
<?php if($id==$val['calling']):?>
<option value="<?php echo $id?>" selected><?php echo $name?></option>
<?php else:?>
<option value="<?php echo $id?>"><?php echo $name?></option>
<?php endif?>
<?php endforeach;?>
</select>
</td>
<td><input type="text"  id="phone_office-<?php echo $val['sn']?>" name="phone_office[<?php echo $val['sn']?>]" value="<?php echo $val['phone_office']?>"  size="10"/></td>
<td><input type="text"  id="phone_mobile-<?php echo $val['sn']?>" name="phone_mobile[<?php echo $val['sn']?>]" value="<?php echo $val['phone_mobile']?>"  size="10"/></td>
<td><input type="text"  id="email-<?php echo $val['sn']?>" name="email[<?php echo $val['sn']?>]" value="<?php echo $val['email']?>"  size="15"/></td>
<td><input type="text"  id="website-<?php echo $val['sn']?>" name="website[<?php echo $val['sn']?>]" value="<?php echo $val['website']?>"  size="15"/></td>

<td><a href="#"><span class="deleteBtn"  id="del-<?php echo $val['sn']?>"><?php echo $this->translate('delete')?></span></a></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
</form>
</div>